<script setup>
import axios from "axios";
import { ref, onMounted, onBeforeMount, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

const ahomeArr = ref([
  {
    id: 1,
    icon: "icon-yonghu",
    url: "/admin/users",
    name: "用户",
    number: 0,
  },
  {
    id: 2,
    icon: "icon-lianjie",
    name: "网址",
    url: "/admin/urlManagement",
    number: 0,
  },
  {
    id: 3,
    icon: "icon-liuyan1",
    name: "语录",
    url: "/admin/sayings",
    number: 0,
  },
  {
    id: 4,
    icon: "icon-liuyan",
    name: "留言",
    url: "/admin/aMessage",
    number: 0,
  },
]);

const { proxy } = getCurrentInstance();

const canvas = ref(); // dom实例
let myChart = null; // echarts实例
let Radius = null; // echarts实例

const renderChart = async () => {
  let { data } = await axios.get("http://localhost:3000/asideList");
  let res = await axios.get("http://localhost:3000/urlList");
  let label = [];
  //圆形图的数组
  let radiusArr = [];
  let num = [0, 0, 0, 0, 0, 0, 0, 0, 0];
  res.data.forEach((item) => {
    switch (item.type) {
      case "xztj":
        num[0]++;
        break;
      case "cyzd":
        num[1]++;
        break;
      case "zyss":
        num[2]++;
        break;
      case "rjyx":
        num[3]++;
        break;
      case "yddh":
        num[4]++;
        break;
      case "yydt":
        num[5]++;
        break;
      case "sygj":
        num[6]++;
        break;
      case "xxjy":
        num[7]++;
        break;
      case "bgsc":
        num[8]++;
        break;
    }
  });
  data.forEach((item) => {
    label.push(item.name);
  });
  label.forEach((item, i) => {
    radiusArr[i] = {
      value: num[i],
      name: item,
    };
  });
  radiusArr.sort((a, b) => b.value - a.value);
  // console.log(label);
  myChart = proxy.$echarts.init(canvas.value);
  Radius = proxy.$echarts.init(document.querySelector("#Radius"));

  myChart.setOption({
    title: {
      text: "本站网址",
    },
    tooltip: {},
    legend: {
      data: ["数量"],
    },
    xAxis: {
      type: "category",
      data: label,
      axisTick: {
        alignWithLabel: true,
      },
    },
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "数量",
        type: "bar",
        barWidth: "50%",
        data: num,
        color: "#ff0084",
      },
    ],
  });

  Radius.setOption({
    title: {
      text: "本站网址数量",
      left: "center",
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    series: [
      {
        name: "本站网址",
        type: "pie",
        radius: [20, 140],
        center: ["50%", "50%"],
        roseType: "radius",
        itemStyle: {
          borderRadius: 5,
        },
        label: {
          show: false,
        },
        emphasis: {
          label: {
            show: true,
          },
        },
        data: radiusArr,
      },
    ],
  });
};
onBeforeMount(() => {
  let userid = localStorage.getItem("userId");
  if (userid != "root") {
    router.push("404");
  }
});
onMounted(() => {
  getAllData();
  renderChart();
});
const getAllData = async () => {
  let users = await axios.get("http://localhost:3000/userList");
  let i = users.data.findIndex((item) => item.id == "root");
  users.data.splice(i, 1);
  let says = await axios.get("http://localhost:3000/sayingsList");
  let urls = await axios.get("http://localhost:3000/urlList");
  let mess = await axios.get("http://localhost:3000/messages");
  ahomeArr.value[0].number = users.data.length;
  ahomeArr.value[2].number = says.data.length;
  ahomeArr.value[1].number = urls.data.length;
  ahomeArr.value[3].number = mess.data.length;
};
</script>

<template>
  <div class="ahome">
    <div class="top">
      <ul class="topUl">
        <li
          class="topLi"
          v-for="item in ahomeArr"
          :key="item.id"
          @click="router.push(item.url)"
        >
          <i class="iconfont" :class="item.icon"></i>
          <div class="numZ">{{ item.name }}:</div>
          <div class="numS">{{ item.number }}</div>
        </li>
      </ul>
    </div>
    <div class="center">
      <div id="canvas" ref="canvas"></div>
      <div id="Radius" ref="Radius"></div>
    </div>
  </div>
</template>

<style scoped>
@import url("/src/assets/style/admin/aHome/ahome.scss");
</style>
<style scoped>
#canvas {
  width: 800px;
  height: 400px;
  /* background-color: pink; */
}
#Radius {
  width: 500px;
  height: 400px;
  /* background-color: red; */
}
</style>
